﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>

    <%@include file="/WEB-INF/jsp/common/import-css.jsp" %>
    <script type="text/javascript" src="${ctx}/assets/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="${ctx}/assets/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${ctx}/assets/js/jquery.validate.js"></script>
    <script type="text/javascript">

        $(function () {

            $("#reg").validate({
                rules: {
                    user: {
                        required: true,
                        minlength: 2
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    url: {
                        required: true,
                        url: true
                    },
                    date: {
                        required: true,
                        date: true
                    },
                    digits: {
                        required: true,
                        digits: true
                    },
                    ensure: {
                        required: true,
                        digits: true,
                        equalTo: "#pass"
                    }
                },
                messages: {
                    user: {
                        required: "账号不得为空!",
                        minlength: "您输入的位数太少了哦!"
                    }
                },
                showErrors : function (errorMap, errorList){
                    var errorNum=this.numberOfInvalids();

                    if(errorNum>0){
                        $("#message").html("您有"+errorNum+"条错误!");
                    }else{
                        $("#message").html("")
                    }
                }


            });

        });


    </script>
</head>

<body>


<form id="reg" action="#">
    账号：<input type="text" id="user" name="user"/><br/>
    邮件：<input type="text" name="email"/><br/>
    <!--网址：<input type="text" name="url"/><br/>-->
    <!--dateISO只验证形式，不验证正确性-->
    <!--生日：<input type="text" name="date"/><br/>-->
    <!--年龄：<input type="text" name="digits"/><br/>-->
    <%--密码：<input type="text" id="pass" name="pass"/><br/>--%>
    <!--确认密码：<input type="password" name="ensure"/><br/>-->
    <input class="active" type="submit" id="press" value="确认"/><br/>
    <label id="message"/>
</form>

<!--用法总结-->

<!--rangelength:[5,10] 输入长度介于 5和  10之间的字符串")(汉字算一个字符)-->
<!--range:[5,10] 输入值必须介于  5和   10之间-->
<!--min:5 输入值不能小于  5-->
<!--max:10 输入值不能大于  10-->
<!--remote:"check.php" 使用 ajax方法调用  check.php验证输入值-->
</body>
</html>